import { Button, message } from 'antd';
import { useRef } from 'react';

/**
 * 可以使用 error.name 和 error.message 来确定错误类型和错误信息
 * https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
*/
const UserMedia = () => {
    const videoRef = useRef<HTMLVideoElement>(null)
    const handleErr = (e: Error) => {
        message.error(e?.message || `摄像头打开失败`);
        // 错误名称并不是所有浏览器中都完全相同的，
        // 但是这些名称是用于识别特定错误类型的标准字符串：
        //     switch (e?.name) {
        //         case "NotAllowedError":
        //         // 处理用户没有授予权限的错误
        //         break;
        //         case "NotFoundError":
        //         // 处理设备不存在的错误
        //         break;
        //         case "NotReadableError":
        //         // 处理设备不可读的错误
        //         break;
        //         case "AbortError":
        //         // 处理操作被终止的错误
        //         break;
        //         default:
        //         // 处理其他错误
        //         break;
        //     }
        // }
    }

    const openCamera = async () => {
        try {
            /**
             * 提示用户给予使用媒体输入的许可，成功后会产生一个 MediaStream，
             * 里面包含了请求的媒体类型的轨道
            */
            const stream = await navigator.mediaDevices.getUserMedia({
                video: true,    // 只需要视频轨道
                audio: false,
            });
            const video = videoRef.current as HTMLVideoElement;
            /** 获取所有的视频轨道信息 */
            const videoTracks = stream.getVideoTracks();
            console.log('使用的设备是: ', videoTracks[0].label);
            video.srcObject = stream;
        } catch (e) {
            console.log('getUserMedia err: ', e);
            handleErr(e as Error);
        }
    }

    return (
        <div>
            <h3>getUserMedia</h3>
            {/* 
                playsInline: 主要用于控制视频是否在移动端浏览器中内联播放。
                如果在 "video" 标签中设置了 "playsInline" 属性，并且该属性的值为 "true"，那么在移动端浏览器中视频将在页面内嵌入显示，不会被全屏播放。
                如果 "playsInline" 属性未设置或设置为 "false"，那么在移动端浏览器中，视频通常将被全屏播放。
                这个属性非常有用，因为它可以在移动端浏览器中避免全屏播放视频的体验，提高用户的使用体验。
                https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video#attr-playsinline
            */}
            <video ref={videoRef} controls width={360} autoPlay playsInline></video><br />
            <Button onClick={openCamera} type="primary">打开摄像头</Button>
        </div>
    );
}

export default UserMedia;